<template>
  <div ref="wrapper">
    <div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'

  export default {
    name: 'Scroll',
    props: {
      // 是否实时监听滚动：0、1 不实时，2 实时但不监听惯性滚动，3 实时且监听惯性滚动
      probeType: {
        type: Number,
        default: 1
      },
      // 是否监听上拉加载
      pullUpLoad: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        scroll: null
      }
    },
    mounted () {
      // setTimeout(this.__initScroll, 20)
      this.__initScroll()
    },
    methods: {
      __initScroll() {
        // 1.初始化BScroll对象
        if (!this.$refs.wrapper) return
        this.scroll = new BScroll(this.$refs.wrapper, {
          probeType: this.probeType,
          click: true,
          pullUpLoad: this.pullUpLoad
        })

        // 2.将监听事件回调
        if (this.probeType === 2 || this.probeType ===3) {
          this.scroll.on('scroll', pos => {
            this.$emit('scrollProbe', pos)
          })
        }
        // 3.监听上拉到底部
        if (this.pullUpLoad) {
          this.scroll.on('pullingUp', () => {
            // console.log('上拉加载');
            this.$emit('pullingUp')
          })
        }
      },
      refresh() {
        // 更新内容体高度
        this.scroll && this.scroll.refresh && this.scroll.refresh()
      },
      finishPullUp() {
        // 上拉加载事件完成后，需调用该方法
		    this.scroll && this.scroll.finishPullUp && this.scroll.finishPullUp()
      },
      scrollTo(x, y, time) {
        // 将视窗回到某个位置
        this.scroll && this.scroll.scrollTo && this.scroll.scrollTo(x, y, time)
      },
      getScrollY() {
        return this.scroll ? this.scroll.y : 0
      }
    }
    // watch: {
    //   data() {
    //     setTimeout(this.refresh, 20)
    //   }
    // }
  }
</script>

<style scoped>


</style>
